<div id="tb<?php echo $uniqid;?>" style="padding:5px">
	<table cellspacing="0" cellpadding="0">
		<tbody>
		<tr>
			<td style="padding: 0 10px;"><span style="line-height:30px;">成为推广大使日期：</span>
				<input id="twostageStartOn"  style="width:110px" type="text"
					   class="easyui-datebox"> </input>至
				<input id="twostageEndOn"  style="width:110px" type="text"
					   class="easyui-datebox"> </input>
			</td>
			<td>
				<select v-model="level" @change="changeLevel" class="forminput inputstyle textbox-text validatebox-text" style="width:100px">
					<option value="">全部等级</option>
					<option v-for="(vo,index) in level_list" :value="vo.level">{{ vo.name }}</option>
				</select>
			</td>
			<td style="padding: 0 10px;">
				<select id="twostageKeywordsType" class="forminput inputstyle textbox-text validatebox-text" onchange="keywordsTypeChange(this)" style="width:120px; border-color: #cccccc !important;">
					<option value="user_id">用户ID</option>
					<option value="user_phone">用户手机号</option>
				</select>
				<input id="twostageKeywords" placeholder="请输入内容"
					   class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
					   type="text"> </input>
			</td>
			<td><a href="javascript:void(0);" onclick="twostageSearch();" class="l-btn l-btn-small l-btn-plain"><span
					class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
			<td><a href="javascript:void(0);" onclick="twostageReset();" class="l-btn l-btn-small l-btn-plain"><span
					class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
					class="l-btn-text">重置</span></span></a></td>
			<td><a href="javascript:void(0);" onclick="twostageReload();" class="l-btn l-btn-small l-btn-plain"><span
					class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
			<td><a href="javascript:void(0);" onclick="twostageExport();" class="l-btn l-btn-small l-btn-plain"><span
					class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
					class="l-btn-text">导出</span></span></a></td>
		</tr>
		</tbody>
	</table>
</div>
<div class="con"  style="-moz-user-select:none;">
	<table id="twostage"></table>
</div>
<div id="twostagedlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
	var twostageListVm = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			level: '',
			level_list: JSON.parse('<?php echo addslashes($level_list);?>'),
		},
		methods: {
			changeLevel(){
				twostageSearch();
			}
		}
	});
	var twostageExport = function () {
		showLoading('.con');
		$.post('/admin/twostage/export', {
			keywordsType: $('#twostageKeywordsType').val(),
			keywords: $('#twostageKeywords').val(),
			level: twostageListVm.level,
			start_on: $('#twostageStartOn').val(),
			end_on: $('#twostageEndOn').val(),
		}, function (data) {
			hideLoading();
			if (parseInt(data.ret) === 0) {
				$.messager.show({
					title: '提示',
					msg: data.msg,
					timeout: 3000,
					showType: 'slide'
				});
				eventmaterialDownload(data.data);
			} else {
				$.messager.alert('提示', data.msg, 'warning');
			}
		}, 'json').fail((response)=> {
			hideLoading();
			$.messager.alert('提示', response.responseText, 'warning');
		});
	};
	var twostageReset = function () {
		$('#twostageKeywords').val('');
		$('#twostageKeywordsType').val('user_id');
		$('#tb<?php echo $uniqid;?> #twostageStartOn').datebox('setValue', '');
		$('#tb<?php echo $uniqid;?> #twostageEndOn').datebox('setValue', '');
		twostageSearch();
	};
	var keywordsTypeChange = function (e) {
		let ele = $(e);
		let placeholder = '请输入内容';
		if(ele.val() === 'user_phone'){
			placeholder = '用户手机号不能少于4位数';
		}
		$('#tb<?php echo $uniqid;?> #twostageKeywords').attr('placeholder',placeholder);
	};
	var twostageShow = function (opt_id) {
		if(opt_id){
			$("#twostagedlg").dialog({
				title: '推广大使详细信息',
				closed: false,
				width: 740,
				height: 520,
				cache: false,
				href: '/admin/twostage/info?id=' + opt_id,
				modal: true,
				buttons: [{
					text: '关闭',
					iconCls: 'icon-no',
					handler: function () {
						$("#twostagedlg").dialog('close');
					}
				}]
			});
		}
	};
	var twostageOneReward = function (opt_id) {
		if(opt_id){
			$("#twostagedlg").dialog({
				title: '推广大使分红明细',
				closed: false,
				width: 1000,
				height: 500,
				cache: false,
				href: '/admin/twostage/singlereward?id=' + opt_id,
				modal: true,
				buttons: []
			});
		}
	};
	var twostageReload = function () {
		$("#twostage").datagrid('reload');
	};
	var twostageDelete = function (opt_id) {
		if (opt_id) {
			$.messager.confirm('提示', '确定删除吗？', function (r) {
				if (r) {
					$.messager.prompt('推广大使退出提示', '请输入推广大使退出原因！', function (remark){
						if('undefined' !== typeof(remark)){
							if(remark){
								$.messager.progress();
								$.post('/admin/twostage/delete', {id: opt_id, remark: remark}, function (data) {
									$.messager.progress('close');
									if (data.ret === 0) {
										$.messager.show({
											title: '提示',
											msg: data.msg,
											timeout: 3000,
											showType: 'slide'
										});
										twostageReload();
									} else {
										$.messager.alert('提示', data.msg, 'warning');
									}
								}, 'json');
							}else{
								$.messager.alert('警告', '没有输入推广大使退出原因，请重新操作！', 'warning');
							}
						}
					});
				}
			});
		} else {
			$.messager.alert('提示', '请先选择要删除的行！', 'warning');
		}
	};
	var twostageSearch = function () {
		var height = $(window).height() - $(".top").height() - 46;
		var width = $(window).width() - $(".leftmenu").width() - 8;
		$("#twostage").datagrid({
			title: '推广大使列表',
			width: width,
			height: height,//高度
			singleSelect: true,//如果为true，则只允许选择一行
			striped: true,//是否显示斑马线效果。
			rownumbers: false,//如果为true，则显示一个行号列。
			pagination: true,//是否显示分页
			pageSize: 10,
			pageList: [10, 15, 20, 25],
			method: 'post',
			sortName: 'created_at',
			sortOrder: 'desc',
			idField: 'twostage_id',
			url: '/admin/twostage/index',
			queryParams: {
				keywordsType: $('#twostageKeywordsType').val(),
				keywords: $('#twostageKeywords').val(),
				level: twostageListVm.level,
				start_on: $('#twostageStartOn').val(),
				end_on: $('#twostageEndOn').val(),
			},
			fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
			nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
			selectOnCheck: false,
			checkOnSelect: true,
			toolbar: '#tb<?php echo $uniqid;?>',
			columns: [[
				{field:'twostage_id',title:'ID',width:'5%', align: 'center'},
				{field:'member',title:'头像',width:'5%', align: 'center',formatter:function (value,rowData,rowIndex){
						return (value && value.avatar) ? "<img height='50px' src='"+value.avatar+"'>" : '';
					}},
				{field:'nickname',title:'用户',width:'10%', align: 'center', formatter: function (value, rowData, rowIndex){
						if(rowData.member){
							return rowData.member.nickname?rowData.member.nickname:'';
						}
					}},
				{field:'phone',title:'手机号',width:'10%', align: 'center', formatter: function (value, rowData, rowIndex){
						if(rowData.member){
							return rowData.member.phone?rowData.member.phone:'';
						}
					}},
				{field:'level',title:'推广大使等级',width:'8%', align: 'center', formatter(value, rowData){
						let area = value ? value : '暂无等级';
						let level_name = '';
						if(rowData.twostage_level && rowData.twostage_level.name){
							level_name = '(' + rowData.twostage_level.name + ')';
						}
						return  area + level_name;
					}},
				{field:'status',title:'状态',width:'4%', align: 'center',formatter:function (value,rowData,rowIndex){
						if(rowData.member) {
							return rowData.member.status ? '<span class="status_yes">正常</span>' : '<span class="status_no">异常</span>';
						}
					}},
				{field:'twostage_last_log',title:'变动时间', align: 'center',width:'8%', formatter(value, rowData){
						if(value){
							return value ? value.created_at : '2000-01-01 00:00:00';
						}
					}},
				{field:'twostage_last_log_remark',title:'备注',width:'20%', formatter(value, rowData){
						if(rowData.twostage_last_log){
							return rowData.twostage_last_log ? rowData.twostage_last_log.remark : '未填写';
						}
					}},
				{field: 'options', title: '操作', align:'left', width: '15%', formatter: function (value, rowData, rowIndex) {
						let buttons = '<div class="table">';
						buttons += '<span class="l-btn l-btn-small color9 table" onclick="twostageShow(\'' + rowData.twostage_id + '\')"><span class="l-btn-text">详情</span></span>';
						buttons += '<span class="l-btn l-btn-small color9 table" onclick="twostageOneReward(\'' + rowData.twostage_id + '\')"><span class="l-btn-text">佣金明细</span></span>';
						buttons += '<span class="l-btn l-btn-small color9 table" onclick="twostageDelete(\'' + rowData.twostage_id + '\')"><span class="l-btn-text">删除</span></span>';
						return buttons + '</div>';
					}},
			]],
			onDblClickRow: function (index, field) {
				twostageShow(field.twostage_id);
			}
		});
	};
	onDatagridResize("#twostage");
	twostageSearch();
</script>
<style>
	.status_yes{
		color: #0eb913
	}
	.status_no{
		color: #9f1807
	}
	.keywords_input_search_box{
		width: 300px;
		border-color: #cccccc;
	}
</style>
